@function rem($px) {
  @return $px / 20 + rem
}

.clearfix:after {
  display: block;
  clear: both;
  content: '';
}

.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: rem(50);
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
  z-index: 30;
  .head_find {
    height: rem(30);
    //width: 100%;
    margin: rem(10) rem(65) 0 rem(85);
    background: #ffffff;
    border-radius: 10px;
  }
  #logo {
    width: rem(75);
    position: absolute;
    left: rem(5);
    top: rem(10);
  }
  .head_txt {
    position: absolute;
    right: 0;
    top: 0;
    height: rem(45);
    padding: 0 rem(10);
    background: url("../img/ling.png") no-repeat top center;
    background-size: rem(30) !important;
    span {
      margin-top: - rem(10);
      font-size: rem(12);
      color: #ffffff;
      line-height: rem(80);
    }
  }
}

.body {
  background: #f5f5f5;
}

.banner {
  width: 100vw;
  img {
    width: 100vw;
  }
}

.nav {
  background: #fff;
  padding-bottom: rem(20);
  .nav_ul {
    width: 100%;
    li {
      width: 25%;
      float: left;
      text-align: center;
      margin-top: rem(5);
      position: relative;
      img {
        width: rem(45);
        display: block;
        margin: rem(10) auto;
      }
      p {
        font-size: rem(12);
        line-height: rem(15);
      }
      .cx {
        padding: 2px 3px;
        border-radius: rem(3);
        background: #ff8100;
        font-size: rem(12);
        color: white;
        position: absolute;
        left: 50%;
        top: rem(5);
      }
    }
  }
}

.privilege {
  margin-top: rem(10);
  background: #ffffff;
  border: 1px solid #f1f1f1;
  border-left: 0;
  border-right: 0;
  .privilege_row {
    li {
      float: left;
      border: 1px solid #f5f5f5;
      border-right: 0;
      border-bottom: 0;
    }
  }
  .row_1 {
    & > li {
      background: #fff;
      width: 33%;
      font-size: rem(12);
      text-align: center;
      img {
        height: rem(50);
        display: block;
        margin: rem(15) auto 0;
      }
      span {
        line-height: rem(40);
        font-weight: bolder;
      }
    }
    & > li:nth-child(1) {
      color: #fc4134;
      border-left: 0;
    }
    & > li:nth-child(2) {
      color: #00b431;
    }
    & > li:nth-child(3) {
      color: #0ab8de;
    }
  }
  .row_2 {
    li {
      width: 49.5%;
      float: left;
      background: #ffffff;
      height: rem(90);
      padding-top: rem(5);
      img {
        width: 100%;
      }
    }
    li:first-child {
      border-right: 1px solid #f5f5f5;
    }
  }
  .row_3 {
    li {
      float: left;
      width: rem(110);
      height: rem(115);
      border-bottom: 1px solid #f1f1f1;
      //background-size: 50% 50%;
    }
    li:nth-child(1) {
      background-size: 100% !important;
      background: url("../img/index_qnav_qd.png") no-repeat top center;
    }
    li:nth-child(2) {
      width: rem(190);
      background-size: 100% !important;
      background: url("../img/index_qnav_yq.png") no-repeat top center;
    }
    li:nth-child(3) {
      background-size: 100% !important;
      background: url("../img/index_qnav_tx.png") no-repeat top center;
    }
  }
  .row_4 {
    padding-top: rem(10);
    padding-bottom: rem(5);
    .row_4_left {
      width: rem(224);
      height: rem(165);
      float: left;
      background-size: 70% !important;
      background: url("../img/index_qnav_ds.png") no-repeat right top;
      font-size: 12px;
      p {
        color: green;
        font-weight: bold;
        line-height: 2;
        margin-left: rem(15);
      }
      div {
        display: block;
        width: rem(145);
        line-height: 1.5;
        margin-left: rem(15);

      }
    }
    .row_4_right {
      width: rem(190);
      height: rem(165);
      float: left;
      ul {
        li {
          float: none;
          border: 0;
          padding-left: rem(55);
          p {
            font-size: rem(12);
            font-weight: bold;
            line-height: rem(30);
            color: #303030;
          }
          span {
            display: inline-block;
            padding-left: .5em;
            color: #989899;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            width: rem(120);
          }
        }
        li:nth-child(1) {
          background-size: rem(55) !important;
          background: url("../img/index_qnav_bc.png") no-repeat left center;
        }
        li:nth-child(2) {
          background-size: rem(55) !important;
          background: url("../img/index_qnav_yz.png") no-repeat left center;
        }
        li:nth-child(3) {
          background-size: rem(50) !important;
          background: url("../img/index_qnav_ms.png") no-repeat left center;
        }
      }
    }
  }
}

.list {
  margin-top: rem(10);
  padding-bottom: rem(65);

  background: #ffffff;
  .list_title {
    height: rem(40);
    span {
      line-height: rem(40);
      border-left: 4px solid #ff9804;
      font-size: rem(18);
      color: #ff9804;
      padding-left: 10px;
      font-weight: bolder;
    }
  }
  .list_body {
    li {
      padding: rem(10) rem(8) rem(8) rem(20);
      border-top: 1px solid #f5f6f6;
      .pic {
        float: left;
        display: block;
        width: 25%;
      }
      .list_bd_tit {
        width: 74%;
        float: left;
        p {
          font-size: 12px;
          font-weight: bold;
          margin-left: rem(10);
          line-height: 1.5;
        }
        .list_span {
          margin-left: rem(10);
          font-size: 12px;
          color: #adac9b;
          line-height: 3;
        }
        .money {
          margin-left: rem(10);
          font-size: 12px;
          span:first-child {
            color: #ff191d;
          }
          span:last-child {
            float: right;
            b {
              padding: 0 rem(10);
            }
            i {
              border-left: 1px solid #888888;
              padding-left: rem(10);
              font-style: normal;
            }
          }
        }
      }

    }
  }
}

#pullUp {
  font: 3rem/4rem "宋体";
  text-align: center;
  color: #dd50b9;
  font-size: 2.2rem;
  display: none;
  padding-bottom: rem(65);

}

.footer {
  width: 100vw;
  height: rem(65);
  position: fixed;
  left: 0;
  bottom: 0;
  background: #fff;
  ul {
    li {
      padding-top: rem(10);
      height: rem(55);
      float: left;
      width: 20%;
      font-size: rem(12);
      text-align: center;
      .icon {
        font-size: rem(35);
        margin: rem(5) 0;
      }

    }
  }
}